<template>
	<view class="container">

		<!--
		 marign与transform的区别:

		 marign:外边距可以改变元素的位移。
		浏览器页面渲染时margin可以控制元素的位置,
		同时会改变render tree的结构,会引起页面layout回流和repaint重绘。
		从浏览器性能考虑,transform会比margin更省时间。
		transform实际上也是用到了GPU加速,占用了内存,
		合成器会负责将层合成绘制为最终的屏幕画面。在硬件加速体系结构，合成由GPU负责。
		在chrome浏览器多进程模型中，有一个专门的进程来负责传递Render进程的命令，即GPU进程。
		Render进程和GPU进程是通过共享内存传递的。
		Render进程可以快速的将命令发给命令缓冲区,
		并且返回到CPU密集的render活动中,留给GPU进程去处理这些命令。
		我们可以充分利用多内核机器上的GPU进程和CPU进程。
		这也是为什么GPU会加速渲染,使transform渲染速度更快的又一原因。


		浏览器取回代码后,首先会构造DOM树,根据HTML标签,构造DOM树。
		之后会解析CSS样式,
		1、解析的顺序是浏览器的样式 ->
		2、用户自定义的样式 ->
		3、页面的link标签等引进来的样式 ->
		4、写在style标签里面的内联样式

		最后根据DOM树以及解析的CSS样式,
		构造RENDER树,在RENDER树中,会把DOM树中没有的元素给去除,
		比如head标签以及里面的内容,以及display:none的元素也会被去除。

		重绘(repaint)和重排(reflow):
		当DOM的变化影响了元素的几何属性（宽或高）,
		浏览器需要重新计算元素的几何属性,
		同样其他元素的几何属性和位置也会因此受到影响。
		浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。这个过程称为重排。
		完成重排后,浏览器会重新绘制受影响的部分到屏幕,该过程称为重绘。
		并不是所有的DOM变化都会影响几何属性,比如改变一个元素的背景色并不会影响元素的宽和高,
		这种情况下只会发生重绘。
		重排必然导致重绘,所以重排更加恶心。其实我们一直研究的应该是怎么避免触发多次重排。

		transform是否可以避免重排重绘问题:
		那么使用CSS3的transform来实现动画是否可以避免重排问题？或者说浏览器针对这一部分做了其他优化？

		CSS的最终表现分为以下四步：Recalculate Style -> Layout -> Paint Setup and Paint -> Composite Layers
		按照中文的意思大致是 查找并计算样式 -> 排布 -> 绘制 -> 组合层
		这上面的几个步骤有点类似于上文说到的重排必定导致重绘，而查询属性会强制发生重排。
		所以上文提到的重排重绘内容可以结合这里进行理解。
		由于transform是位于Composite Layers层,而width、left、margin等则是位于Layout层,在Layout层发生的改变必定导致Paint Setup and Paint -> Composite Layers
		所以相对而言使用transform实现的动画效果肯定比left这些更加流畅。
		而且就算抛开这一角度，在另一方面浏览器也会针对transform等开启GPU加速。
	-->

		<!-- <view class="emojiList"
		        :style="[{'margin-left': emojiMarginLeft + 'px'},{'width':emojiWidth+'px'},{'transition': transition }]"
			    @touchstart="gtouchstart($event)"
				@touchmove="gtouchmove($event)"
				@touchend="gtouchend($event)"> -->

		<view class="emojiList" :style="[{'transform': 'translateX(' + emojiMarginLeft + 'px)'},{'width':emojiWidth+'px'},{'transition': transition }]"
		 @touchstart="gtouchstart($event)" @touchmove="gtouchmove($event)" @touchend="gtouchend($event)">
			<view class="item">
				<view v-for="(item1,index1) in beforeList" :key="index1">
					<image v-if="item1.url!=''" :src="items[groupIndex -1].minEmoji && index1===beforeList.length -1  ? item1.url : items[groupIndex -1].emojiPath + item1.url "
					 class="emojiImg" :class="[{ 'minImg' : items[groupIndex-1].minEmoji },{'bigImg' : !items[groupIndex-1].minEmoji }]" />

					<view v-else class="emojiImg" :class="[{ 'minImg' : items[groupIndex-1].minEmoji },{'bigImg' : !items[groupIndex-1].minEmoji }]">
					</view>

				</view>
			</view>


			<view class="item" v-for="(item3,index3) in items[groupIndex].emojiList" :key="index3">
				<view v-for="(em4,index4) in item3" :key="index4">
					<image :src="items[groupIndex].minEmoji && index4 === item3.length-1 ? em4.url : items[groupIndex].emojiPath + em4.url "
					 class="emojiImg" :class="[{ 'minImg' : items[groupIndex].minEmoji },{'bigImg' : !items[groupIndex].minEmoji }]"
					 @tap="imgClick($event,items[groupIndex],em4,groupIndex)" />

					<!-- <img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/0.gif"/> -->
				</view>
			</view>
			<!-- 最后一个 -->
			<view class="item">
				<view v-for="(item5,index5) in nextList" :key="index5">
					<image v-if="item5.url!=''" :src="items[groupIndex +1].minEmoji && index5 === nextList.length -1  ? item5.url : items[groupIndex +1].emojiPath + item5.url "
					 class="emojiImg" :class="[{ 'minImg' : items[groupIndex+1].minEmoji },{'bigImg' : !items[groupIndex+1].minEmoji }]" />

					<view v-else class="emojiImg" :class="[{ 'minImg' : items[groupIndex+1].minEmoji },{'bigImg' : !items[groupIndex+1].minEmoji }]">
					</view>
				</view>

			</view>

		</view>

		<view class="point">
			<view class="point-item" v-for="(item7,index7) in pointItemList" :key="index7" :class="{'active':activeIndex -1 ===index7}"></view>
		</view>

		<block v-if="false">
			<image src="https://static.shopsuite.cn/xcxfile/appicon/im/img/tab/add2.png" @tap="addEmojiPackage" style="float:left;margin-top: -64px; margin-left: 12px; width: 32px;height: 32px;" />
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">

				<view class="scroll-view-item_H" v-for="(emoji,index) in items" :key="index" v-if="index!==0 && index!==items.length-1">
					<image style="width: 32px;height: 32px;" @tap="selectTab(1,index)" :src="emoji.emojiPath + emoji.emojiList[0][0].url"
					 :class="{'activeEmojiTab':activeEmojiTab ===index}" />
				</view>

			</scroll-view>

			<image src="https://static.shopsuite.cn/xcxfile/appicon/im/img/tab/setting.png" @tap="settingEmoji" style="float:left;margin-top: -64px; margin-left: 320px; width: 32px;height: 32px;">
		</block>

		<view class="toast" v-show="toastShow">
			{{toastText}}
		</view>

	</view>
</template>

<script>
	import emojiData from "@/static/emoji/emojiData.js"
	var windowWidth = 0
	uni.getSystemInfo({
		success: function(res) {
			windowWidth = res.windowWidth
		}
	});

	export default {
		// 接受父组件参数，单向数据流
		props: {

		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				emojiWidth: windowWidth * 8,
				emojiMarginLeft: -windowWidth,
				transition: 'transform 0 ease-in 0',

				toastShow: false,
				toastText: '',
				beginX: 0,
				beforeList: [{}],
				nextList: [{}],
				nowX: 0,
				endX: 0,
				activeEmojiTab: 1,
				activeIndex: 1,
				groupSize: emojiData.imgArr.length, // 表情包的组的个数
				groupIndex: 1, // 当前整个表情包的所在位置索引
				items: emojiData.imgArr,
				pointItemList: 0,
				// list: [
				// 	['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴'],
				// 	['睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过'],
				// 	['酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢'],
				// 	['饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂'],
				// 	['疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见'],
				// 	['擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠'],
				// 	['鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀'],
				// 	['西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰'],
				// 	['凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀'],
				// 	['足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强'],
				// 	['弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你'],
				// 	['NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈'],
				// 	['磕头', '回头', '跳绳', '挥手', '激动', '街舞', '左太极', '右太极']
				// ],
				// reg: /\S{1,3}/gi,
				// item: []
			}
		},
		created() {
			this.emojiWidth = windowWidth * (this.items[this.groupIndex].emojiList.length + 2)
			this.emojiMarginLeft = -windowWidth * this.activeIndex
			// this.transition='none'

			// // 初始化
			this.pointItemList = this.items[this.groupIndex].emojiList.length
			// console.log(this.pointItemList)
			this.beforeList = this.items[this.groupIndex - 1].emojiList[this.items[this.groupIndex - 1].emojiList.length - 1]
			this.nextList = this.items[this.groupIndex + 1].emojiList[0]
		},

		onLoad: function() {
			const res = uni.getSystemInfoSync();
			this.style.pageHeight = res.windowHeight;
			// console.log(uni.getSystemInfoSync().screenWidth)
			this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (100); //像素
		},
		methods: {
			selectTab: function(activeIndex, index) {
				// this.toast("选择表情包:" + index + "激活索引:"+activeIndex)

				this.activeIndex = activeIndex
				this.groupIndex = index
				this.activeEmojiTab = index

				this.emojiWidth = windowWidth * (this.items[this.groupIndex].emojiList.length + 2)
				this.emojiMarginLeft = -windowWidth * this.activeIndex
				// this.transition="none"
				this.beforeList = this.items[this.groupIndex - 1].emojiList[this.items[this.groupIndex - 1].emojiList.length - 1]
				this.nextList = this.items[this.groupIndex + 1].emojiList[0]
				this.pointItemList = this.items[this.groupIndex].emojiList.length

			},
			addEmojiPackage: function() {
				this.toast("添加表情包")
			},
			settingEmoji: function() {
				this.toast("设置表情")
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			// 开始触摸
			gtouchstart: function(e) {
				this.beginX = e.touches[0].clientX
				// this.toast('开始: ' + this.beginX + '')
			},
			// 移动
			gtouchmove: function(e) {
				this.nowX = e.changedTouches[0].clientX
				// console.log(e)
				// this.toast('移动: ' + this.nowX + '')
				this.slice()
			},
			// 结束触摸
			gtouchend: function(e) {
				this.endX = e.changedTouches[0].clientX
				// this.toast('结束: ' + this.endX + '')
				this.judgeMove()
			},

			/**
			 * 计算偏移量
			 */
			judgeMove: function() {
				var deltaX = this.endX - this.beginX
				if (deltaX >= windowWidth * 3 / 5) { // 右移
					// this.toast('上一张')
					// [1]小点指示器 减去 1
					this.activeIndex--
					// [2]小点指示器边界判断, 小于等于 0, 重新赋值为 1
					if (this.activeIndex <= 0) {
						// [3]当 activeIndex 小于等于0 时, 组的索引 减去 1
						this.groupIndex--
						var transition = ''
						// [4]groupIndex 组的边界判断 小于等于 0, 重新赋值为 1,并且指示器 activeIndex 为 1
						if (this.groupIndex <= 0) {
							this.groupIndex = 1
							this.pointItemList = this.items[1].emojiList.length
							this.activeIndex = 1
							// transition='margin-left .2s ease-out'
						} else {
							this.pointItemList = this.items[this.groupIndex].emojiList.length
							this.activeIndex = this.items[this.groupIndex].emojiList.length
							// transition='none'
							this.selectTab(this.activeIndex, this.groupIndex)
						}

						this.beforeList = this.items[this.groupIndex - 1].emojiList[this.items[this.groupIndex - 1].emojiList.length - 1]
						this.nextList = this.items[this.groupIndex + 1].emojiList[0]


						this.emojiWidth = windowWidth * (this.items[this.groupIndex].emojiList.length + 2)
						this.emojiMarginLeft = -windowWidth * this.activeIndex
						// this.transition=transition


					} else {

						this.emojiWidth = windowWidth * (this.items[this.groupIndex].emojiList.length + 2)
						this.emojiMarginLeft = -windowWidth * this.activeIndex
						// this.transition='none'

					}
				} else if (deltaX <= -windowWidth * 3 / 5) { // 左移
					// this.toast('下一张')
					// [1]小点指示器 加 1
					++this.activeIndex
					// [2]小点指示器边界判断, 大于等于 items.length -2, 重新赋值为 items.length -2
					if (this.activeIndex > this.items[this.groupIndex].emojiList.length) {
						// 最后一次改变 组的值
						++this.groupIndex
						var transition = ''
						// this.toast("组数:"+vm.groupIndex +",组个数:" + vm.groupSize)
						// 判断是否是最后一组
						if (this.groupIndex > this.groupSize - 2) {
							// 等于1 是循环,等于 vm.groupSize 是结束, 去掉前一个和后一个为空的列表
							this.groupIndex = this.groupSize - 2
							this.pointItemList = this.items[this.groupIndex].emojiList.length
							this.activeIndex = this.items[this.groupIndex].emojiList.length
							// transition='margin-left .2s ease-out'

						} else {
							this.pointItemList = this.items[this.groupIndex].emojiList.length
							this.activeIndex = 1
							// transition='none'
							this.selectTab(1, this.groupIndex)
						}

						this.beforeList = this.items[this.groupIndex - 1].emojiList[this.items[this.groupIndex - 1].emojiList.length - 1]
						this.nextList = this.items[this.groupIndex + 1].emojiList[0]

						this.emojiWidth = windowWidth * (this.items[this.groupIndex].emojiList.length + 2)
						this.emojiMarginLeft = -windowWidth * this.activeIndex
						// this.transition=transition

					} else {

						this.emojiWidth = windowWidth * (this.items[this.groupIndex].emojiList.length + 2)
						this.emojiMarginLeft = -windowWidth * this.activeIndex
						// this.transition='none'
					}
				} else {
					// this.toast('不动')
					this.reset()
				}
			},

			/**
			 * 计算起始位置
			 */
			slice: function() {
				var deltaX = this.nowX - this.beginX

				this.emojiWidth = windowWidth * (this.items[this.groupIndex].emojiList.length + 2)
				this.emojiMarginLeft = -windowWidth * this.activeIndex + deltaX
				// this.transition='none'
			},
			/**
			 * 重置
			 */
			reset: function() {

				this.emojiWidth = windowWidth * (this.items[this.groupIndex].emojiList.length + 2)
				this.emojiMarginLeft = -windowWidth * this.activeIndex
				// this.transition='all .2s ease-out'
			},

			imgClick: function(e, emojiList, emojiItem, groupIndex) {
				// this.toast('表情: ' + emojiItem.alt + ':' + emojiItem.url)
				// let emotion = '<img src="' + emojiPath + emojiItem.url + '"/>'
				this.$emit('addEmoji', {
					emojiPath: emojiList.emojiPath,
					minEmoji: emojiList.minEmoji,
					emojiItem: emojiItem,
					groupIndex: groupIndex
				})
			},
			// 自定义 toast 弹窗
			toast: function(str) {
				let me = this
				if (str.length > 0) {
					me.toastText = str
					me.toastShow = true
					setTimeout(function() {
						me.toastShow = false
						me.toastText = ""
					}, 1500)
				}
			}
			// clickHandler(i) {

			// 	let emotion = `#${i};`
			// 	this.$emit('emotion', emotion)
			// },
			// emotion(res) {
			// 	//let word = res.replace(/\#|\;/gi,'')
			// 	const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']
			// 	let index = list.indexOf(res)
			// 	return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" align="middle">`
			// }
		}
	}
</script>

<style scoped>
	@import url("@/static/css/vue-emoji.css");

	.scroll-view_H {
		/* border:2px solid red; */
		white-space: nowrap;
		width: 76%;
		margin-top: -128rpx;
		margin-left: 96rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 20%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 16rpx;
	}

	.activeEmojiTab {
		background-color: gray;
		opacity: 0.8;
		border-radius: 20rpx;
	}
</style>
